<template>
	<view class="container">
		<uni-group title="日期" top="0">
			<button @click="showDrawerBeginDay" type="default" size="mini">{{selectBeginDay}}</button><button
				disabled="true" plain="true" type="default" size="mini"
				style="margin-left: 10rpx;border:#FFFFFF">VS</button><button @click="showDrawerEndDay" type="default"
				size="mini" style="margin-left: 10rpx;">{{selectEndDay}}</button>
		</uni-group>
		<uni-group title="DKP积分算法" top="20">
			<uni-forms err-show-type="undertext" :value="formData" ref="form" border="true" label-width="100">
				<uni-forms-item required label="T4击杀" name="t4Kill">
					<uni-easyinput type="number" trim="all" v-model="formData.t4Kill" placeholder="1积分等于的T4击杀数" />
				</uni-forms-item>
				<uni-forms-item required label="T5击杀" name="t5Kill">
					<uni-easyinput type="number" trim="all" v-model="formData.t5Kill" placeholder="1积分等于的T5击杀数" />
				</uni-forms-item>
				<uni-forms-item required label="阵亡" name="death">
					<uni-easyinput type="number" trim="all" v-model="formData.death" placeholder="1积分等于的阵亡数" />
				</uni-forms-item>
				<button @click="submitForm('form')" size="mini">提交</button>
			</uni-forms>
		</uni-group>
		<uni-group title="搜索昵称" top="20">
			<uni-easyinput placeholder="输入搜索昵称" maxlength="11" :value="keyName" @input="bindInput"></uni-easyinput>
		</uni-group>
		<uni-group title="排行" top="20">
			<view style="padding-top: 30rpx;">
				<uni-table border stripe emptyText="暂无更多数据">
					<uni-tr>
						<uni-th align="center" style="width: 5%;">排名</uni-th>
						<uni-th align="center" style="width: 10%;">昵称</uni-th>
						<uni-th align="center" style="width: 25%;">{{splitDate(selectBeginDay)}}</uni-th>
						<uni-th align="center" style="width: 25%;">{{splitDate(selectEndDay)}}</uni-th>
						<uni-th align="center" style="width: 35%;">数值</uni-th>
					</uni-tr>
					<uni-tr v-for="(item, index) in rank" v-bind:key="item.gameId">
						<uni-td align="center">{{index+1}}</uni-td>
						<uni-td align="center"><text v-for="(item2, index2) in item.nickname"
								:class="item2 == keyName ? 'searchHigh' : '' ">{{item2}}</text></uni-td>
						<uni-td align="center">{{fmoney(item.beginValue)}}</uni-td>
						<uni-td align="center">{{fmoney(item.endValue)}}</uni-td>
						<uni-td align="center">{{fmoney(item.value)}}</uni-td>
					</uni-tr>
				</uni-table>
			</view>
		</uni-group>

		<uni-drawer ref="drawer">
			<scroll-view style="height: 100%;padding: 10rpx;" scroll-y="true">
				<view v-if="day.length==0">
					没有可用日期
				</view>
				<view v-else>
					<button v-for="(item, index) in day" @click="{{closeDrawer(item)}}" type="default" size="mini"
						style="margin-left: 10rpx;">{{item}}</button>
				</view>
			</scroll-view>
		</uni-drawer>
		<view>
			<!-- 提示信息弹窗 -->
			<uni-popup ref="message" type="message" :value="popupMessage">
				<uni-popup-message :type="popupMessage.msgType" :message="popupMessage.messageText" :duration="1000">
				</uni-popup-message>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	const getInf = (str, key) => str.replace(new RegExp(`${key}`, 'g'), `%%${key}%%`).split('%%');
	export default {
		data() {
			return {
				keyName: null,
				formData: {
					t4Kill: '',
					t5Kill: '',
					death: ''
				},
				unionId: '',
				witchDay: '',
				server: '',
				selectBeginDay: '选择',
				selectEndDay: '选择',
				tagType: ['default', 'default', 'default', 'default', 'default', 'default', 'default'],
				day: [],
				rank: [],
				popupMessage: {
					type: 'center',
					msgType: 'success',
					messageText: '这是一条成功提示',
					value: ''
				},
				rules: {
					t4Kill: {
						rules: [{
							required: true,
							errorMessage: '请输入1积分等于的T4击杀数',
						}, {
							format: 'int',
							errorMessage: '必须是数字'
						}]
					},
					t5Kill: {
						rules: [{
							required: true,
							errorMessage: '请输入1积分等于的T5击杀数',
						}, {
							format: 'int',
							errorMessage: '必须是数字'
						}]
					},
					death: {
						rules: [{
							required: true,
							errorMessage: '请输入1积分等于的阵亡数',
						}, {
							format: 'int',
							errorMessage: '必须是数字'
						}]
					}
				}
			}
		},
		onReady() {
			this.$refs.form.setRules(this.rules)
		},
		onLoad: function(option) {
			this.serverId = option.serverId
			uni.request({
				url: getApp().globalData.url + '/api/stat/getHasDataDay?serverId=' +
					this.serverId,
				header: {
					'content-type': 'application/json',
					'token': getApp().globalData.token
				},
				success: (res) => {
					if (res.data.code == "00000") {
						this.day = res.data.data
					}
				}
			});
		},
		methods: {
			showDrawerBeginDay() {
				this.$refs.drawer.open();
				this.witchDay = 'BeginDay'
			},
			showDrawerEndDay() {
				this.$refs.drawer.open();
				this.witchDay = 'EndDay'
			},
			closeDrawer(day) {
				if (this.witchDay == 'BeginDay') {
					this.selectBeginDay = day
				} else if (this.witchDay == 'EndDay') {
					this.selectEndDay = day
				}
				this.$refs.drawer.close();
			},
			submitForm: function(e) {
				let that = this
				if (that.selectBeginDay != '选择' && that.selectEndDay != '选择') {
					this.$refs.form.submit().then(dkp => {
						dkp.beginDate = this.selectBeginDay
						dkp.endDate = this.selectEndDay
						dkp.serverId = this.serverId
						uni.request({
							url: getApp().globalData.url + '/api/stat/getDKPCompare',
							header: {
								'content-type': 'application/json',
								'token': getApp().globalData.token
							},
							method: "POST",
							data: dkp,
							success: (res) => {
								if (res.data.code == "00000") {
									this.rank = res.data.data
								} else {
									that.popupMessage.msgType = "error"
									that.popupMessage.messageText = res.data.msg
									that.$refs.message.open()
								}
							}
						});
					}).catch(err => {
						console.log('表单错误信息：', err);
					})
				} else {
					that.popupMessage.msgType = "info"
					that.popupMessage.messageText = "请先选择时间"
					that.$refs.message.open()
				}
			},
			fmoney(s) {
				var isNegative = false
				var str = s.toString()
				if (str.startsWith("-")) {
					str = str.replace("-", "")
					isNegative = true
				}
				var l = str.split("").reverse()
				var t = ""
				for (var i = 0; i < l.length; i++) {
					t += l[i] + ((i + 1) % 3 == 0 && (i + 1) != l.length ? "," : "")
				}
				if (isNegative) {
					return "-" + (t.split("").reverse().join(""))
				} else {
					return t.split("").reverse().join("")
				}

			},
			splitDate(day) {
				var d = day.toString()
				if (d == '选择') {
					return '日期'
				} else {
					return d.substring(0, 4) + "/" + d.substring(4, 6) + "/" + d.substring(6, 8)
				}

			},
			bindInput: function(e) {
				var that = this;
				that.keyName = that.trim(e)
				that.searchTap();
			},
			searchTap: function() {
				var that = this;
				var data = that.rank;
				if (that.keyName != '') {
					for (var i = 0; i < data.length; i++) {
						var dic = data[i];
						var text = dic["nickname"];
						if (Array.isArray(text)) {
							dic["nickname"] = getInf(text.join(""), that.keyName);
						} else {
							dic["nickname"] = getInf(text.toString(), that.keyName);
						}
					}
				}
			},
			trim: function(s) {
				return s.replace(/(^\s*)|(\s*$)/g, "");
			}
		}
	}
</script>

<style>
	.container {
		padding: 20rpx;
	}

	uni-tag {
		margin: 10rpx;
	}

	.searchHigh {
		font-weight: bold;
		color: #409eff;
	}
</style>
